<template>
  <view class="home-page">
    <view class="home-header">
      <view class="search-content">
        <t-search v-model="search" @confirm="$jumpUrl(`/subPages/searchList/searchList?keyword=${search}`)"
          plac-text="请输入关键词搜索"></t-search>
        <!-- <view class="map">
          <u-icon name="map" color="#FFFFFF" size="13"></u-icon>
          <view class="map-address">泰州医药城</view>
        </view> -->
      </view>

    </view>
    <view class="banner">
      <view class="side-color"></view>
      <uni-swiper-dot backgroundColor selectedBackgroundColor="rgba(249, 52, 43, 1)" selectedBorder
        class="uni-swiper-dot-box" @clickItem=clickItem :info="bannerList" :current="current" :mode="mode"
        :dots-styles="dotsStyles" field="content">
        <swiper circular="true" class="swiper-box" @change="change" :current="swiperDotIndex">
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <image @click="bannerClick(item)" class="banner-img"
              :src="`https://www.worldintek.com:39011/yaolexue-service/${item.imageDto.compressLink}`" mode=""
              loading="lazy"></image>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view class="home-content home_container">
      <view class="notice">
        <view class="sign">
          <text class="sign-text">动态</text>
        </view>
        <view class="notice-text">
          <u-notice-bar @click="handleClickNotice" linkType fontSize="14" direction="column" color="#333333"
            :text="computedNotice" bgColor="#FAFAFA"></u-notice-bar>
        </view>
      </view>
      <view class="consult" v-if="Information">
        <view class="consult-title">{{ Information.title }}</view>
        <t-readmore @read-more="readMore()" :content="readMcontent" isJmp="true" color="#000" labelColor="#FA312A"
          :iSinfo="false">

        </t-readmore>

      </view>
      <view class="readNum">
        <view class="read-l read-l-com">
          <view class="read-name">
            累计阅读量:
          </view>
          <view class="read-num read-num-com">
            {{ Information.clickNumber - 1 ? Information.clickNumber - 1 : 0 }}
          </view>
        </view>
        <view class="read-r read-com">
          <view class="read-name">
            累计点赞量:
          </view>
          <view class="read-num">
            {{ Information.likeNumber ? Information.likeNumber : 0 }}
          </view>
        </view>
      </view>

      <!-- 医药直播-->
      <view class="zb-title">
        <view class="l-con flex">
          <view class="l-text width_1">医药直播</view>
        </view>
        <view class="r-con flex align-center" @click="handleTelcat">
          <view class="r-text width_1">查看全部</view>
        </view>
      </view>

      <view class="zb-content">
        <view class="l-box-border"></view>
        <view class="r-box-border">
          <swiper class="scroll-view_H" scroll-x="true" scroll-left="120">
            <swiper-item id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(item, index) in broadCastBannerList"
              :key="index">

              <view class="info">
                <image style="width: 671rpx; height: 317rpx;" 
                @click="toLive(item.broadcastLink)"
                  :src="`https://www.worldintek.com:39011/yaolexue-service/${item.imageDto.compressLink}`" mode=""
                  loading="lazy"></image>
              </view>
              <view class="bespeak">
                <view class="title">
                  <view class="com_title">
                    {{ item.title ? item.title : '' }}
                  </view>
                  <view class="com_num">
                    {{ item.appointmentNumber ? item.appointmentNumber : 0 }}人{{ item.appointmentStatus == 0 ? '未预约' :
                      '已预约' }}
                  </view>
                </view>
                <t-button :disabled="disabled" lineWidth="150" lineHeight="50" @handleBtnClick="bespeakClick(item)"
                  backgroundColor="#FFF" color="#F63009" :content="item.appointmentStatus === 0 ? '立即预约' : '已预约'"
                  borderRadius="25" fontSize="24" border="1px solid #F63009"></t-button>
              </view>
            </swiper-item>
          </swiper>
        </view>

      </view>
      <!-- 公益推荐-->
      <view class="gy-title">
        <view class="l-con flex">
          <view class="l-text width_1">公益推荐</view>
        </view>
      </view>
      <view class="gy-content">
        <view @click="benefitClick(item)" class="gy-box" v-for="(item, index) in benefitList" :key="index">
          <view class="gy-l">
            <view class="gy-text com_title">
              {{ item.title }}
            </view>

            <view class="gy-time">
              {{ item.createTime }}
            </view>
          </view>
          <view class="gy-r">
            <image class="gy-img"
              :src="`https://www.worldintek.com:39011/yaolexue-service/${item.imageDtos[0].compressLink}`"
              mode="widthFix"></image>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      bannerList: [],
      dynamicContent: [],
      Information: {},
      readMcontent: '',
      iSinfo: false,
      InformationBroadcast: {},
      queryInfo: {
        limit: 10,
        page: 1
      },
      total: 0,
      benefitList: [],

      dotsStyles: {
        backgroundColor: 'rgba(171, 171, 171, 1)',
        border: '1px rgba(255, 90, 95,0.1) solid',
        color: '#fff',
        selectedBackgroundColor: 'rgba(249, 52, 43, 1)',
        selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
      },
      current: 0,
      swiperDotIndex: 0,
      mode: 'dot',
      mode2: 'round',
      disabled: false,
      broadCastBannerList: [],
      broadCastTotal: 0,
      search: ""
    }

  },
  onShow() {
    this.init()
  },
  onLoad() {
    this.init()

  },
  computed: {
    computedNotice() {
      return this.dynamicContent.map(item => item.name)
    }
  },
  methods: {
    toLive(url) {
      uni.navigateTo({
        url: '/pages/LiveView/LiveView?url=' + url
      })
    },
    handleClickNotice(index) {
      uni.navigateTo({
        url: '/pages/imgtxtDetails/imgtxtDetails?id=' + this.dynamicContent[index].id
      })
    },
    async pageContentItemBroadcast() {
      const res = await this.$http.get('/yaolexue-service-portal/contentItem/pageContentItemBroadcast', this
        .queryInfo, {
        showLoading: true
      })
      console.log('pageContentItemBroadcast', res);
      if (res.code !== 200) {
        uni.showToast({
          title: '获取失败',
          icon: 'none'
        });
      } else {
        this.broadCastBannerList = res.data.items
        this.broadCastTotal = res.data.total
      }
    },
    async init() {
      const token = uni.getStorageSync('token')
      if (!token) {
        uni.reLaunch({
          url: '/pages/login/login'
        })
      } else {
        await Promise.all([
          this.getBannerList(),
          this.getDynamicContentItem(),
          this.getInformationContentItem(),
          this.getInformationBroadcast(),
          this.getPublicBenefit(),
          this.pageContentItemBroadcast()
        ]);
      }

    },
    goToSearchList() {
      uni.navigateTo({
        url: '/subPages/searchList/searchList'
      })
    },
    async getBannerList() {
      try {
        const res = await this.$http.get('/yaolexue-service-portal/home/findHomeBannerBoard');
        if (res.code !== 200) {
          uni.showToast({
            title: '获取失败',
            icon: 'none',
            duration: 500
          });
        }
        this.bannerList = res.data;
      } catch (error) {
        console.error('Error fetching data:', error);
        uni.showToast({
          title: '网络请求失败',
          icon: 'none',
          duration: 500
        });
      }
    },

    async getDynamicContentItem() {
      const res = await this.$http.get('/yaolexue-service-portal/home/getDynamicContentItem')


      if (res.code !== 200) {
        uni.showToast({
          title: '获取失败',
          icon: 'none'
        })
      }
      console.log('dynamicContent', res);
      this.dynamicContent = res.data
    },
    async getInformationContentItem() {
      const res = await this.$http.get('/yaolexue-service-portal/home/getInformationContentItem')
      // console.log('getInformationContentItem', res);
      if (res.code !== 200) {
        uni.showToast({
          title: '获取失败',
          icon: 'none'
        })
      }
      if (res.data) {
        this.Information = res.data

        this.readMcontent = res.data.contentText
      }

    },
    readMore() {
      console.log('展开');
      uni.navigateTo({
        url: '/pages/imgtxtDetails/imgtxtDetails?id=' + this.Information.id
      })

    },
    beforeRouteLeave(to, from, next) {
      // 在离开当前路由时重置iSinfo属性
      this.iSinfo = false;
      next();
    },
    async getInformationBroadcast() {
      const res = await this.$http.get('/yaolexue-service-portal/home/getInformationBroadcast', {
        isNeedLoading: false
      })
      if (res.code !== 200) {
        uni.showToast({
          title: '获取失败',
          icon: 'none'
        })
      }
      console.log('getInformationBroadcast', res);
      if (res.data && res.data[0]) {
        this.InformationBroadcast = res.data[0]

      }


    },
    async getPublicBenefit() {
      const res = await this.$http.get('/yaolexue-service-portal/home/pagePublicBenefitContent', this.queryInfo, {
        isNeedLoading: false
      })

      if (res.code !== 200) {
        uni.showToast({
          title: '获取失败',
          icon: 'none',
          duration: 500
        })
      }
      this.benefitList = res.data.items
      this.total = res.data.total
    },
    async bespeakClick(InformationBroadcast) {
      console.log(InformationBroadcast, '22222');
      const res = await this.$http.post(
        `/yaolexue-service-portal/home/broadcastAppointment/${InformationBroadcast.id}`)

      if (res.code == 200) {
        this.disabled = false


        uni.showToast({
          title: '预约成功!',
          icon: 'none'
        })
        InformationBroadcast.appointmentStatus = res.data.appointmentStatus;
        InformationBroadcast.appointmentNumber += 1
        this.getInformationBroadcast()
        console.log('item.appointmentStatus', item.appointmentStatus);
      } else {
        this.disabled = true
        uni.showToast({
          title: '已预约，请勿重复!',
          icon: 'none'
        })
      }
    },
    benefitClick(item) {
      uni.navigateTo({
        url: '/pages/imgtxtDetails/imgtxtDetails?id=' + item.id
      })
    },
    bannerClick(item) {

      let url = ''
      switch (item.contentItemType) {
        case 1:
          url = `/pages/imgtxtDetails/imgtxtDetails?id=${item.contentItemId}`
          break;
        case 2:
          url = `/pages/VideoItemDetail/VideoItemDetail?id=${item.contentItemId}`
          break;
        case 3:
          url = `/pages/AudioItemList/AudioItemList?id=${item.albumId}&cid=${item.contentItemId}`
          break;
        default:
          break;
      }
      uni.navigateTo({
        url
      })

    },
    clickItem(e) {
      this.swiperDotIndex = e
    },
    change(e) {
      this.current = e.detail.current;
    },
    handleTelcat() {
      uni.navigateTo({
        url: '/subPages/telecastList/telecastList'
      })
    }
  }
}
</script>

<style lang="scss">
.home-page {
  background: #FAFAFA;

  .home-header {
    // height: 210rpx;
    background: #FA312A;
    padding: 2rpx 30rpx 2rpx 30rpx;
    position: sticky;
    top: 0;
    z-index: 999;

    .search-content {

      display: flex;
      margin-top: 37rpx;
      margin-bottom: 30rpx;
      background: #FA312A;



      .map {
        width: 180rpx;
        height: 70rpx;
        // opacity: 0.3;
        border-radius: 44rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FC6F6A;
        margin-left: 20rpx;
        overflow: hidden;

        .map-address {
          font-size: 22rpx;
          font-weight: 500;
          color: #ffffff;
          margin-left: 6rpx;
        }
      }
    }



  }

  .banner {
    background: #FA312A;
    border-bottom-right-radius: 200rpx 13rpx;
    padding: 0 30rpx;
    position: relative;
    height: 251rpx;

    .side-color {
      width: 118rpx;
      height: 118rpx;
      background: linear-gradient(-25deg, #FA312A 0%, #F48051 100%);
      border-radius: 10rpx;
      position: absolute;
      left: 10rpx;
      bottom: -20rpx;
    }

    .swiper-box {
      width: 689rpx;
      height: 333rpx;
      border-radius: 27rpx;
      background: rgba(255, 255, 255, .1);
      position: relative;

      .banner-img {
        width: 100%;
        height: 333rpx;
        border-radius: 27rpx;
        position: absolute;
      }
    }

  }

  .home-content {
    margin-top: 16%;

    .notice {
      display: flex;
      align-items: center;

      .sign {
        width: 73rpx;
        height: 40rpx;
        background: linear-gradient(110deg, #FA312A 0%, #F48051 100%);
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10rpx;

        .sign-text {
          font-size: 26rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 31rpx;
        }
      }

      .notice-text {
        width: 100%;
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;

        .u-notice-bar {
          padding: 0 !important;

        }

        ::v-deep .u-icon__icon {
          display: none;
        }
      }
    }

    .consult {
      .consult-title {
        font-size: 32rpx;
        font-weight: bold;
        color: $color-bt;
        margin: 48rpx 0 27rpx 0;
      }
    }


    .readNum {
      display: flex;
      border-top: 1px solid $color-line;
      border-bottom: 1px solid $color-line;
      margin-top: 46rpx;
      margin-left: -18rpx;
      margin-right: -18rpx;

      .read-l {
        display: flex;
        align-items: center;
        margin-left: 88rpx;
        width: fit-content;
      }

      .read-l-com {
        padding: 36rpx 0;
        width: fit-content;
      }

      .read-r {
        display: flex;
        align-items: center;
        margin-left: 136rpx;
      }

      .read-name {
        width: fit-content;
        font-size: 28rpx;
        font-family: PingFang;
        font-weight: 500;
        color: $color-zt;
      }

      .read-num {
        width: fit-content;
        font-size: 26rpx;
        font-family: PingFang;
        font-weight: 400;
        color: $color-bs1;
        margin-left: 16rpx;
      }
    }


    .zb-title,
    .gy-title {
      display: flex;
      justify-content: space-between;
      margin-top: 49rpx;
      margin-bottom: 40rpx;

      .l-con {
        .l-text {
          width: fit-content;
          font-size: 32rpx;
          font-family: Source Han Sans CN;
          font-weight: 700;
          color: #333333;
          letter-spacing: 1px;

        }
      }

      .r-con {

        .r-text {
          width: fit-content;
          height: 25rpx;
          font-size: 26rpx;
          font-family: PingFang;
          font-weight: 400;
          color: #999999;
          line-height: 31rpx;
        }
      }
    }



    .zb-content {
      display: flex;
      width: 689rpx;
      height: 416rpx;

      .l-box-border {
        width: 19rpx;
        height: 415rpx;
        background: linear-gradient(0deg, #FA312A 0%, #F48051 100%);
        border-radius: 12rpx 0 0 12rpx;
      }

      .r-box-border {

        width: 689rpx;
        height: 416rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 3rpx 16rpx 0rpx rgba(0, 0, 0, 0.35);

        border-radius: 0 10rpx 10rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .info {
          width: 671rpx;
          height: 317rpx;
          background: red;
          border-radius: 0rpx 10rpx 0rpx 0rpx;

        }

        .bespeak {
          width: 100%;
          height: 104rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            width: auto;
            height: 104rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            margin-left: 10rpx;

            overflow: hidden;

            .com_title {
              width: 100%;
              height: 29rpx;
              font-size: 30rpx;
              font-family: PingFang;
              font-weight: bold;
              color: #333333;
              line-height: 31rpx;
            }

            .com_num {
              width: 136rpx;
              height: 20rpx;
              font-size: 24rpx;
              font-family: PingFang;
              font-weight: 400;
              color: #FA920B;
              line-height: 31rpx;
              margin-bottom: 23rpx;
            }
          }

          .btn-content {
            height: 48rpx;
            width: auto;
            margin-right: 22rpx;
          }
        }




      }
    }

    .scroll-view_H {
      height: 500px;
    }







    .gy-content {
      display: flex;
      flex-direction: column;
      margin-bottom: 30rpx;

      .gy-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 689rpx;
        height: 219rpx;
        background: #FFFFFF;
        border-radius: $border-radius;
        margin-bottom: 19rpx;

        .gy-l {
          display: flex;
          flex-direction: column;
          margin-left: 28rpx;
          overflow: hidden;

          .gy-text {
            width: 416rpx;
            height: 116rpx;
            margin-top: 44rpx;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }

          .gy-time {
            font-size: $font-size-activity-tag;
            font-family: PingFang;
            font-weight: 400;
            color: $color-zt;
            padding: 19rpx 0 24rpx 0;
          }
        }

        .gy-img {
          width: 210rpx;
          height: 160rpx;
        }


      }
    }




  }
}

.indicator {
  display: flex;
  justify-content: center;

  &__dot {
    height: 6rpx;
    width: 6rpx;
    border-radius: 100rpx;
    // background-color: rgba(255, 255, 255, 0.35);
    background-color: #ABABAB;
    margin: 0 5rpx;
    transition: background-color 0.3s;

    &--active {
      background-color: red;
    }
  }
}
</style>